<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>ER diagram | Mermaid Quick Test Page</title>
    <link rel="icon" type="image/png" href="" />
    <style>
      div.mermaid {
        /* font-family: 'trebuchet ms', verdana, arial; */
        font-family: 'Courier New', Courier, monospace !important;
      }
      .diagram-title {
        fill: red;
        font-size: 24pt;
      }
    </style>
  </head>

  <body>
    <pre class="mermaid">

---
title: This is a title
---
erDiagram
  %% title This is a title
  %% accDescription Test a description

  "Person . CUSTOMER"||--o{ ORDER : places

  ORDER ||--|{ "€£LINE_ITEM ¥" : contains

  "Person . CUSTOMER" }|..|{ "Address//StreetAddress::[DELIVERY ADDRESS]" : uses

  "Address//StreetAddress::[DELIVERY ADDRESS]" {
      int customerID FK
      string line1 "this is the first address line comment"
      string line2
      string city
      string region
      string state
      string postal_code
      string country
      }

      "a_~`!@#$^&*()-_=+[]{}|/;:'.?¡⁄™€£‹¢›∞ﬁ§‡•°ª·º‚≠±œŒ∑„®†ˇ¥Á¨ˆˆØπ∏“«»åÅßÍ∂ÎƒÏ©˙Ó∆Ô˚¬Ò…ÚæÆΩ¸≈π˛çÇ√◊∫ı˜µÂ≤¯≥˘÷¿" {
        string name "this is an entity with an absurd name just to show characters that are now acceptable as long as the name is in double quotes"
      }

      "€£LINE_ITEM ¥" {
        int orderID FK
        int currencyId FK
        number price
        number quantity
        number adjustment
        number final_price
      }
    </pre>

    <script src="./mermaid.js"></script>
    <script type="module">
      mermaid.initialize({
        theme: 'default',

        // themeCSS: '.node rect { fill: red; }',
        logLevel: 3,
        securityLevel: 'loose',
        flowchart: { curve: 'basis' },
        gantt: { axisFormat: '%m/%d/%Y' },
        sequence: { actorMargin: 50 },
        // sequenceDiagram: { actorMargin: 300 } // deprecated
      });
    </script>
  </body>
</html>
